
import React,{ useEffect,useState,useRef } from 'react'
import { Col,Row,Form,Typography,Table,Button ,Popconfirm,Modal,Input} from 'antd'
import { observer } from 'mobx-react';
import { ColumnsType } from 'antd/lib/table';
import produce from '../../mobx/store/produce';
import { DeleteOutlined ,FormOutlined} from '@ant-design/icons';
import { ajax } from '../../api';



const { Title } = Typography

function ProduceList() {
    const [form] = Form.useForm()
    const [obj,setObj] = useState<any>({})
    
    const {producelist,cproducelist,getproducelist,sproduce} = produce;

    useEffect(()=>{
        cproducelist({}) 
    },[])


    const columns: ColumnsType<object> = [   //表头数据
        {
            title: 'Id',
            render: (text: any, value: any, index: number) => <b>{index + 1}</b>,
            align: "center",
            width: 100
        },
        {
            title: '商品名称',
            dataIndex: 'pname',
            key: 'pname',
            render: (text: any) => <b>{text}</b>,
            align: "center",
        },
        {
            title: '商品数量',
            dataIndex: 'pnum',
            key: 'pnum',
            render: (text: any) => <b>{text}</b>,
            align: "center",
        },
        {
            title: '商品价格',
            dataIndex: 'price',
            key: 'price',
            render: (text: any) => <b>{text}</b>,
            align: "center",
        },
       
        {
            title: '操作',
            align: "center",
            render:(text:any)=>{
                return(
                    <div>
                        <Button type="primary" size="small" style={{margin:"0 5px",backgroundColor:"skyblue"}} onClick={()=>change(text)}><FormOutlined /></Button>
                        
                        <Popconfirm
                            title="你确定要删除吗?"
                            onConfirm={()=>confirm(text)}
                            okText="确定"
                            cancelText="取消"
                        >
                           <Button danger size="small" ><DeleteOutlined /></Button>
                        </Popconfirm>
                    </div>
                )
            }

        }
    ]

    //搜索
     const keyword:any = useRef()
     const searchPro =  () => {   //搜索
         const kw = keyword.current.state.value;
         // console.log(kw);
         sproduce({   //查询
            keyword:kw,
         })
    }

    // 删除
    const confirm = async (item:any) =>{
        console.log(item);
        let {code,result}:any = await ajax.delproduce({_id:item._id})
        if(code == 200){
            var list = producelist.filter((val:any)=>val._id!=item._id)
            // 重新请求数据
            getproducelist(list)
        }
    }

    const handleCancel = () => {
        setShow(false)
    };
    const [show,setShow] =  useState<boolean>(false)
    const change = (item:any)=>{
        setShow(true)
        form.setFieldsValue({
            // pnum:item.pnum   //带到修改页面的值
        })
        setObj(item)
    }

    const conformSet = async()=>{   //确定修改
        const data = form.getFieldsValue()
        console.log(data);
        const {code,result}:any = await ajax.changeproduce({
            ...data,
            _id:obj._id
        })
        if(code == 200){
            var list = producelist.map((item:any)=>{
                if(item._id == obj._id){
                    item = {...item,...data}
                }
                return item
            })
            getproducelist(list)
            setShow(false)
        }
    }       
    

    return (
        <div style={{marginBottom:"40px",padding:"20px"}} >
            <Title level={3} style={{ margin: "20px", fontWeight: '500' }}>产品列表</Title>
            <Row style={{marginBottom:"40px"}}>
                <Col span={6} style={{ margin: "0 20px" }}>
                    <Input placeholder='请输入关键字' ref={keyword} style={{borderRadius:'10px'}}></Input>
                </Col>
                <Col>
                    <Button onClick={searchPro} style={{color:"#fff",backgroundColor:"skyblue",borderRadius:'20px'}}>搜索</Button>
                </Col>
            </Row>

            <Row style={{ marginLeft: 20 }}>
                <Col >
                    <Table
                        dataSource={producelist}
                        columns={columns}
                        sticky
                        bordered
                        id="table"
                        pagination={{ pageSize: 5 }}
                        // rowKey={item => item._id}
                    >
                    </Table>
                </Col>
            </Row>
            <Row >
                <Col style={{borderRadius:"50%"}}>
                    <Modal
                        title="修改产品信息"
                        visible={show}
                        onOk={conformSet}
                        onCancel={handleCancel}
                        okText="确定修改"
                        cancelText="取消修改"
                        
                    >
                        <Form form={form} name="basic" >
                            <Form.Item label="商品数量" name="pnum">
                                <Input />
                            </Form.Item>
                            <Form.Item label="商品价格" name="price">
                                <Input />
                            </Form.Item>
                        </Form>
                    </Modal>
                </Col>
            </Row>
          
        </div>
    )
}
export default observer(ProduceList)